<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>迈迪防 | 资源管理</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <link rel="stylesheet" href="../static/style/style.min.css">
    <link rel="stylesheet" href="../static/style/bootstrap.min.css">
    <link rel="stylesheet" href="../static/style/bootstrap-select.min.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <% include "../login/header.html" %>
    <% include "../login/left.html" %>
</div>
<div id="update-main" style="display: none; margin: 50px 0px 0px 0px">
    <input type="hidden" name="id" value="" id="news-id">
    <div class="layui-form-item">
        <label class="layui-form-label" style="">线路状态:</label>
        <div class="layui-input-block">
            <select id="line_status" name="line_status" class="layui-input">
                <option value="0">正常</option>
                <option value="1">维护</option>
                <option value="2">升级</option>
                <option value="3">故障</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
            <button class="layui-btn" id="ip-update-main" data-id="">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="ip-status-update">退出</button>
        </div>
    </div>
</div>

<div id="add-master" style="display: none; margin: 50px 0px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">master名称</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="masterName"
                   name="master_name"
                   placeholder="请输入名称"
                   class="layui-input"/>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">心跳连接URL</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="keepUrl"
                   name="keep_url"
                   placeholder="请输入URL"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">监听超时时间</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="bindLive"
                   name="bind_live"
                   placeholder="请输入时间"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">

        <label class="layui-form-label" style="width: 100px">上报频率</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="reportFrequency"
                   name="report_frequency"
                   placeholder="请输入名称"
                   class="layui-input"/>

        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
            <button class="layui-btn" id="add">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="master-close">退出</button>
        </div>
    </div>
</div>


<div id="add-main" style="display: none; margin: 50px 0px 0px 0px">
    <input type="hidden" name="id" value="" id="add-id">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">master名称</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="master_name" name="master_name"
                   placeholder="请输入名称"
                   class="layui-input"/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">心跳连接URL</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="keep_url"
                   name="keep_url"
                   placeholder="请输入URL"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">监听超时时间</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="bind_live"
                   name="bind_live"
                   placeholder="请输入时间"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">上报频率</label>
        <div class="layui-input-block">
            <input style="width: 400px;margin-bottom: 5%" type="text" lay-verify="required" id="report_frequency"
                   name="report_frequency"
                   placeholder="请输入名称"
                   class="layui-input"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
            <button class="layui-btn" id="edit-masterInfo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="exit-add">退出</button>
        </div>
    </div>
</div>


<script type="text/html" id="barDemo">
    {{# if(d.enabled==0){ }}
    <a class="layui-btn  layui-btn-xs enabledBtn" lay-event="enabled" onclick="enabled(this)"
       data-enabled="{{d.enabled}}" data-id="{{d.id}}"><i
            class="layui-icon layui-icon-delete"></i>启用</a>
    {{# }if(d.enabled ==1) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs enabledBtn" lay-event="enabled" onclick="enabled(this)"
       data-enabled="{{d.enabled}}" data-id="{{d.id}}"><i
            class="layui-icon layui-icon-delete"></i>禁用</a>
    {{# }}}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-id="{{d.id}}"
       onclick="remove(this)">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" data-id="{{d.id}}" onclick="editIp(this)">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="editLineBtn" data-id="{{d.id}}"
       data-line-status="{{d.line_status}}"
       onclick="editStatus(this)">编辑状态</a>
</script>
</div>

<div class="layui-body">
    <!-- 内容主体区域 -->
    <div style="padding: 15px;">资源管理</div>
    <div class="layui-row">
        <div class="layui-col-md4">
            <div class="layui-card" style="margin-top: 10%">
                <div class="layui-card-header">
                    <div>
                        <input type="button" class="layui-btn" id="addBtn" value="新增"/>
                        <input type="button" class="layui-btn" id="editBtn" value="编辑"/>
                        <input type="button" class="layui-btn layui-btn-warm" id="closeBtn" value="关闭"/>
                        <input type="button" class="layui-btn layui-btn-danger" id="deleteBtn" value="删除"/>
                    </div>
                </div>
            </div>
            <div style="margin-left: 4%"><input type="button" id="initBtn" class="layui-btn" value="初始化"/>
                <a href="" class="layui-btn">push信息</a>
                <div id="jstree" style="margin-top: 2%;margin-left: -8% ">
                </div>
            </div>
        </div>

        <div class="layui-col-md8">
            <div class="layui-card" style="margin-top: 5%">
                <div class="layui-card-header">
                    <div>端口列表
                        <a href="" class="layui-btn">导入</a>
                        <a href="" class="layui-btn">下载模板</a>
                        <a href="" class="layui-btn">批量修改ip</a>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <table class="layui-table" id="demo" lay-filter="demo" lay-skin="nob">

                </table>
            </div>
        </div>
    </div>
    <div class="layui-row">
    </div>
</div>


<div id="add-ip-main" style="display: none; margin: 50px 0px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ip地址:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="ip_address" name="ip_address"
                   placeholder="请输入ip地址"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">内部地址:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="inside_ip" name="inside_ip"
                   placeholder="请输入ip地址"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">端口:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="port" name="port"
                   placeholder="请输入端口"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">地区:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="region" name="region"
                   placeholder="请输入地区"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">运营商:</label>
        <div class="layui-input-block">
            <select name="provider" id="provider" style="width: 400px" class="layui-input">
                <option value="">请选择</option>
                <option value="CM">中国移动</option>
                <option value="CT">中国电信</option>
                <option value="CU">中国联通</option>
                <option value="BGP">全网路线</option>
            </select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">模式:</label>
        <div class="layui-input-block">
            <select id="ip_model" name="ip_model" style="width: 400px" class="layui-input">
                <option value="0">独享模式</option>
                <option value="1">共享模式</option>
            </select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">防御流量(G):</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="armor_class" name="armor_class"
                   placeholder="请输入上线流量" value="10"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">带宽(M):</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="broadband" name="broadband"
                   placeholder="请输入带宽" value="2"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">承载上限:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="top_limit" name="top_limit"
                   placeholder="请输入承载上限" value="1000"
                   class="layui-input"/>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">云平台:</label>
        <div class="layui-input-block">
            <select id="location_id" name="location_id" style="width: 400px" class="layui-input">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">云平台地区:</label>
        <div class="layui-input-block">
            <select id="area" name="area" style="width: 400px" class="layui-input">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">可用区:</label>
        <div class="layui-input-block">
            <select id="zoon" name="zoon" style="width: 400px" class="layui-input">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ip类型:</label>
        <div class="layui-input-block">
            <select id="ip_type" name="ip_type" style="width: 400px" class="layui-input">
                <option value="0">正常ip</option>
                <option value="1">高危ip</option>
                <option value="2">高防ip</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ping的ip:</label>
        <div class="layui-input-block">
            <select class=" selectpicker" data-live-search="true" multiple="multiple"
                    data-live-search-placeholder="搜索" id="ping_id" name="ping_id" style="width: 400px">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">加速类型:</label>
        <div class="layui-input-block">
            <select id="accelerate_type" name="accelerate_type" style="width: 400px" class="layui-input">
                <option value="无">无</option>
                <option value="CN">国内加速</option>
                <option value="EN">国外加速</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="countryDiv" style="display: none">
        <label class="layui-form-label" style="width: 100px">国家:</label>
        <div class="layui-input-block">
            <select id="country" name="country" style="width: 400px" class="layui-input">
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
            <button class="layui-btn" id="add-ipInfo">确认添加</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="exit-ip-add">退出</button>
        </div>
    </div>
</div>


<div id="edit-ip-main" style="display: none; margin: 50px 0px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ip地址:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="ipAddress" name="ip_address"
                   placeholder="请输入ip地址"
                   class="layui-input"/>
            <input type="hidden" id="editId">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">内部地址:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="insideIp" name="inside_ip"
                   placeholder="请输入ip地址"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">端口:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="editPort" name="port"
                   placeholder="请输入端口"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">地区:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="editRegion" name="region"
                   placeholder="请输入地区"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">运营商:</label>
        <div class="layui-input-block">
            <select name="provider" id="editProvider" style="width: 400px" class="layui-input">
                <option value="">请选择</option>
                <option value="CM">中国移动</option>
                <option value="CT">中国电信</option>
                <option value="CU">中国联通</option>
                <option value="BGP">全网路线</option>
            </select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">模式:</label>
        <div class="layui-input-block">
            <select id="ipModel" name="ip_model" style="width: 400px" class="layui-input">
                <option value="0">独享模式</option>
                <option value="1">共享模式</option>
            </select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">防御流量(G):</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="armorClass" name="armor_class"
                   placeholder="请输入上线流量" value="10"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">带宽(M):</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="editBroadband" name="broadband"
                   placeholder="请输入带宽" value="2"
                   class="layui-input"/>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">承载上限:</label>
        <div class="layui-input-block">
            <input style="width: 400px" type="text" lay-verify="required" id="topLimit" name="top_limit"
                   placeholder="请输入承载上限" value="1000"
                   class="layui-input"/>

        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">云平台:</label>
        <div class="layui-input-block">
            <select id="locationId" name="location_id" style="width: 400px" class="layui-input">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">云平台地区:</label>
        <div class="layui-input-block">
            <select id="editArea" name="area" style="width: 400px" class="layui-input">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">可用区:</label>
        <div class="layui-input-block">
            <select id="editZoon" name="zoon" style="width: 400px" class="layui-input">
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ip类型:</label>
        <div class="layui-input-block">
            <select id="ipType" name="ip_type" style="width: 400px" class="layui-input">
                <option value="0">正常ip</option>
                <option value="1">高危ip</option>
                <option value="2">高防ip</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">ping的ip:</label>
        <div class="layui-input-block">
            <select class=" selectpicker" data-live-search="true" multiple="multiple"
                    data-live-search-placeholder="搜索" id="pingId" name="ping_id" style="width: 400px">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 100px">加速类型:</label>
        <div class="layui-input-block">
            <select id="accelerateType" name="accelerate_type" style="width: 400px" class="layui-input">
                <option value="无">无</option>
                <option value="CN">国内加速</option>
                <option value="EN">国外加速</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="editCountryDiv" style="display: none">
        <label class="layui-form-label" style="width: 100px">国家:</label>
        <div class="layui-input-block">
            <select id="editCountry" name="country" style="width: 400px" class="layui-input">
                <option value="">请选择</option>
            </select>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block" style="margin-left: 30%; margin-top: 10%">
            <button class="layui-btn" id="edit-ipInfo">确认修改</button>
            <button type="reset" class="layui-btn layui-btn-primary" id="exit-editIp-add">退出</button>
        </div>
    </div>

</div>

</div>
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery.min.js"></script>
<script src="../static/plugs/jstree.min.js"></script>
<script src="../static/assets/js/global.js"></script>
<script src="../static/plugs/bootstrap.min.js"></script>
<script src="../static/plugs/bootstrap-select.js"></script>
<script>
    var table = '';
    var common = '';
    var form = '';
    layui.use(['common'], () => {
        table = layui.table;
        var element = layui.element;
        common = layui.common;
        form = layui.form;
        //加载的时候初始化pingName
    });

    function remove(obj) {
        let id = $(obj).attr('data-id');
        layer.confirm(`确定要删除吗？`, (index, layero) => {
            $.ajax({
                url: '/operatorDevice/delete',
                method: 'post',
                data: {id: id},
                success: (result) => {
                    if (result.errmsg == 1) {
                        layer.msg(`删除成功！`);
                        table.reload('demo'); //数据刷新
                    } else {
                        layer.msg(`删除失败！`);
                    }
                    layer.close(index); //关闭弹层
                }
            });
        });
    }


    $('#locationId').change(() => {
        $("#editArea").empty();       //清空
        $("#editZoon").empty();       //清空
        //联动
        $.ajax({
            url: '/operatorDevice/getCloudRegion',
            method: 'post',
            data: {name: $('#locationId').find("option:selected").text()},
            success: (result) => {
                $("#editArea").append('<option value=>请选择</option>');//新增
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#editArea").append("<option value='" + result.ipList[i].area + "'>" + result.ipList[i].area + "</option>");//新增
                }
            }
        });
    });

    $('#accelerateType').change(() => {
        if ($('#accelerateType').val() == 'EN') {
            $('#editCountryDiv').css('display', 'block');
        } else {
            $('#editCountryDiv').css('display', 'none');
            $('#editCountry').find("option").eq(0).prop("selected", true)   //默认选中第一个
        }
    });

    $('#editArea').change(() => {
        $("#editZoon").empty();       //清空
        //联动
        $.ajax({
            url: '/operatorDevice/getZoon',
            method: 'post',
            data: {name: $('#editArea').val()},
            success: (result) => {
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#editZoon").append("<option value='" + result.ipList[i].zone + "'>" + result.ipList[i].zone + "</option>");//新增
                }
            }
        });
    });


    $('#location_id').change(() => {
        $("#area").empty();       //清空
        $("#zoon").empty();       //清空
        //联动
        $.ajax({
            url: '/operatorDevice/getCloudRegion',
            method: 'post',
            data: {name: $('#location_id').find("option:selected").text()},
            success: (result) => {
                $("#area").append('<option value=>请选择</option>');//新增
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#area").append("<option value='" + result.ipList[i].area + "'>" + result.ipList[i].area + "</option>");//新增
                }
            }
        });
    });

    $('#accelerate_type').change(() => {
        if ($('#accelerate_type').val() == 'EN') {
            $('#countryDiv').css('display', 'block');
        } else {
            $('#countryDiv').css('display', 'none');
            $('#country').find("option").eq(0).prop("selected", true)   //默认选中第一个
        }
    });

    $('#area').change(() => {
        $("#zoon").empty();       //清空
        //联动
        $.ajax({
            url: '/operatorDevice/getZoon',
            method: 'post',
            data: {name: $('#area').val()},
            success: (result) => {
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#zoon").append("<option value='" + result.ipList[i].zone + "'>" + result.ipList[i].zone + "</option>");//新增
                }
            }
        });
    });

    $('#edit-ipInfo').on('click', () => {
        $.ajax({
            url: '/operatorDevice/editIpInfo',
            method: 'post',
            data: {
                id: $('#editId').val(),
                ip_address: $('#ipAddress').val(),
                inside_ip: $('#insideIp').val(),
                port: $('#editPort').val(),
                region: $('#editRegion').val(),
                provider: $('#editProvider').val(),
                ip_model: $('#ipModel').val(),
                armor_class: $('#armorClass').val(),
                broadband: $('#editBroadband').val(),
                top_limit: $('#topLimit').val(),
                location_id: $('#locationId').val(),
                area: $('#editArea').val(),
                zone: $('#editZoon').val(),
                ip_type: $('#ipType').val(),
                ping_id: $('#pingId').val(),
                accelerate_type: $('#accelerateType').val(),
                country_id: $('#editCountry').val(),
            },
            success: (result) => {
                if (result.errmsg == 1) {
                    layer.msg('修改ip成功！');
                    setTimeout(() => {
                        layer.closeAll();
                        table.reload('demo'); //数据刷新
                        // window.location.reload();
                    }, 1000);
                } else {
                    layer.msg(result.data);
                }
            }
        })

    });

    function editStatus(obj) {
        let status = $(obj).attr('data-line-status');
        let id = $(obj).attr('data-id');
        $('#ip-update-main').attr('data-id', id);
        $('#line_status').val(status);
        common.showLayer({
            title: ['编辑线路状态', 'font-size:25px;text-align:center'],
            width: '600px',
            height: '400px',
            name: '#update-main'
        });
    }

    $('#ip-update-main').on('click', () => {
        let line_status = $('#line_status').val();
        let id = $('#ip-update-main').attr('data-id');
        $.ajax({
            url: '/operatorDevice/editLineStatus',
            method: 'post',
            data: {id: id, line_status: line_status},
            success: (result) => {
                layer.closeAll();
                if (result.errmsg == 1) {
                    layer.msg(`状态修改成功！`);
                    table.reload('demo'); //数据刷新
                } else {
                    layer.msg(`状态修改失败！`);
                }
            }
        });
    });

    function editIp(obj) {
        let id = $(obj).attr('data-id');
        $.ajax({
            url: `/operatorDevice/getIpInfo`,
            method: 'post',
            data: {id: id},
            success: (result) => {
                $('#editId').val(result.id);
                $('#ipAddress').val(result.ip_address);
                $('#insideIp').val(result.inside_ip);
                $('#editPort').val(result.port);
                $('#editRegion').val(result.region);
                $('#editProvider').val(result.provider);
                $('#ipModel').val(result.ip_model);
                $('#armorClass').val(result.armor_class);
                $('#editBroadband').val(result.broadband);
                $('#topLimit').val(result.top_limit);
                $('#locationId').val(result.location.location_name);
                $('#editArea').val(result.location.area);
                $('#editZoon').val(result.location.zone);
                $('#ipType').val(result.ip_type);
                // $('#pingId').val(result.ping_ip);
                $('#accelerateType').val(result.accelerate_type);
                $('#editCountry').val(result.country_id);
                common.showLayer({
                    title: ['修改ip', 'font-size:25px;text-align:center'],
                    width: '600px',
                    height: '400px',
                    name: '#edit-ip-main'
                });
            }
        });
    }

    let ip_edit_close = document.getElementById('exit-editIp-add');
    ip_edit_close.addEventListener('click', function cancel() {
        layer.closeAll();
    });


    function enabled(obj) {
        let enabled = $(obj).attr('data-enabled');
        let id = $(obj).attr('data-id');
        let type = enabled == 0 ? '启用' : '禁用';
        let path = enabled == 0 ? 'open' : 'stop';
        layer.confirm(`确定要${type}吗？`, (index, layero) => {
            $.ajax({
                url: `/operatorDevice/${path}`,
                method: 'post',
                data: {id: id, enabled: enabled},
                success: (result) => {
                    if (result.errmsg == 1) {
                        console.log(result);
                        layer.msg(`${type}成功！`);
                        table.reload('demo'); //数据刷新
                    } else {
                        layer.msg(`${type}失败！`);
                    }
                    layer.close(index); //关闭弹层
                }
            });
        });
    }


    $(function () {

        //加载的时候初始化国家信息
        $.ajax({
            url: '/operatorDevice/getCountry',
            method: 'post',
            success: (result) => {
                for (let i = 0; i < result.length; i++) {
                    $("#country").append("<option value='" + result[i].id + "'>" + result[i].chinese_name + "</option>");//新增
                    $("#editCountry").append("<option value='" + result[i].id + "'>" + result[i].chinese_name + "</option>");//新增
                }
            }
        });

        $.ajax({
            url: '/operatorDevice/getPing',
            method: 'post',
            success: (result) => {
                for (let i = 0; i < result.length; i++) {
                    $("#pingId").append("<option value='" + result[i].id + "'>" + result[i].ping_name + "</option>");//新增
                    $("#ping_id").append("<option value='" + result[i].id + "'>" + result[i].ping_name + "</option>");//新增
                }
            }
        });

        //加载的时候初始化云平台信息
        $.ajax({
            url: '/operatorDevice/getLocation',
            method: 'post',
            success: (result) => {
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#locationId").append("<option value='" + result.ipList[i].location_name + "'>" + result.ipList[i].location_name + "</option>");//新增
                    $("#location_id").append("<option value='" + result.ipList[i].location_name + "'>" + result.ipList[i].location_name + "</option>");//新增
                }
            }
        });

        $.ajax({
            url: '/operatorDevice/getZoneAll',
            method: 'post',
            success: (result) => {
                for (let i = 0; i < result.ipList.length; i++) {
                    $("#editArea").append("<option value='" + result.ipList[i].area + "'>" + result.ipList[i].area + "</option>");//新增
                    $("#editZoon").append("<option value='" + result.ipList[i].zone + "'>" + result.ipList[i].zone + "</option>");//新增
                }
            }
        });

        var tree = $("#jstree").jstree({
            "core": {
                'multiple': false,
                "check_callback": true,
                'data': {
                    'url': '/operatorDevice/getTree',
                    'data': function () {
                        return {'authority': ''};
                    }
                }
            },
            "checkbox": {
                "keep_selected_style": false,
            },
            "plugins": ["wholerow", "checkbox"]
        });


        var nodeInfo;
        $('#editBtn').on('click', function () {
            common.showLayer({
                title: ['编辑master', 'font-size:25px;text-align:center'],
                width: '600px',
                height: '400px',
                name: '#add-main'
            });
            $.ajax({
                url: '/operatorDevice/getMaster',
                method: 'post',
                data: {master_id: nodeInfo.id},
                success: (result) => {
                    result = result.masterList;
                    $('#add-id').val(result.id);
                    $('#master_name').val(result.master_name);
                    $('#keep_url').val(result.keep_live_url);
                    $('#bind_live').val(result.bind_live);
                    $('#report_frequency').val(result.report_frequency);

                }
            });
        });


        //关闭master
        $('#closeBtn').on('click', () => {
            if (typeof (nodeInfo) == 'undefined') {
                layer.msg('请选中要关闭的master节点！');
            } else {
                $.ajax({
                    url: '/operatorDevice/stopMaster',
                    method: 'post',
                    data: {master_id: nodeInfo.id},
                    success: (result) => {
                        if (result.errmsg == 1) {
                            layer.msg('关闭成功成功！');
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        } else {
                            layer.msg(result.data);
                        }
                    }
                });
            }
        });


        $('#initBtn').on('click', () => {
            if (typeof (nodeInfo) == 'undefined') {
                layer.msg('请选中要初始化的master节点！');
            } else {
                $.ajax({
                    url: '/operatorDevice/initMaster',
                    method: 'post',
                    data: {master_id: nodeInfo.id},
                    success: (result) => {
                        if (result.errmsg == 1) {
                            layer.msg('初始化成功成功！');
                            setTimeout(() => {
                                table.reload('demo'); //数据刷新
                            }, 1000);
                        } else {
                            layer.msg(result.data);
                        }
                    }
                });
            }
        });


        let add_ipInfo = document.getElementById('add-ipInfo');
        add_ipInfo.addEventListener('click', function cancel() {
            let country = '';
            if ($('#accelerate_type').val() == 'EN') {
                country = $('#country').val();
            }
            $.ajax({
                url: '/operatorDevice/createIp',
                method: 'post',
                data: {
                    ip_address: $('#ip_address').val(),
                    inside_ip: $('#inside_ip').val(),
                    port: $('#port').val(),
                    region: $('#region').val(),
                    provider: $('#provider').val(),
                    ip_model: $('#ip_model').val(),
                    armor_class: $('#armor_class').val(),
                    broadband: $('#broadband').val(),
                    top_limit: $('#top_limit').val(),
                    location_id: $('#location_id').val(),
                    area: $('#area').val(),
                    zone: $('#zoon').val(),
                    ip_type: $('#ip_type').val(),
                    ping_id: $('#ping_id').val(),
                    accelerate_type: $('#accelerate_type').val(),
                    country_id: country,
                    master_id: nodeInfo.id
                },
                success: (result) => {
                    if (result.errmsg == 1) {
                        layer.msg('新增ip成功！');
                        setTimeout(() => {
                            layer.closeAll();
                            // table.reload('demo'); //数据刷新
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg('新增ip失败！');
                    }
                }
            });
        });

        let close_add = document.getElementById('exit-add');
        close_add.addEventListener('click', function cancel() {
            layer.closeAll();
        });
        let master_close = document.getElementById('master-close');
        master_close.addEventListener('click', function cancel() {
            layer.closeAll();
        });

        let ip_status_update = document.getElementById('ip-status-update');
        ip_status_update.addEventListener('click', function cancel() {
            layer.closeAll();
        });

        let exit_ip_add = document.getElementById('exit-ip-add');
        exit_ip_add.addEventListener('click', function cancel() {
            layer.closeAll();
        });


        $('#bindLive').on('blur', () => {
            let bindLive = $('#bindLive').val();
            let reg = /^\d+$/;
            if (!reg.test(bindLive)) {
                layer.msg('请输入正确的监听时间（整数）！');
            }
        });


        $('#reportFrequency').on('blur', () => {
            let reportFrequency = $('#reportFrequency').val();
            let reg = /^([5-9]|(1[0-5]))$/;
            if (!reg.test(reportFrequency)) {
                layer.msg('请输入正确的上报频率（5-15）');
            }
        });


        //监听修改时的数据
        $('#bind_live').on('blur', () => {
            let bindLive = $('#bind_live').val();
            let reg = /^\d+$/;
            if (!reg.test(bindLive)) {
                layer.msg('请输入正确的监听时间（整数）！');
            }
        });


        $('#report_frequency').on('blur', () => {
            let reportFrequency = $('#report_frequency').val();
            let reg = /^([5-9]|(1[0-5]))$/;
            if (!reg.test(reportFrequency)) {
                layer.msg('请输入正确的上报频率（5-15）');
            }
        });

        let masterAdd = document.getElementById('add');
        masterAdd.addEventListener('click', function cancel() {
            let master_name = $('#masterName').val();
            let keep_url = $('#keepUrl').val();
            let bind_live = $('#bindLive').val();
            let report_frequency = $('#reportFrequency').val();


            if (master_name == '' || keep_url == '' || bind_live == '' || report_frequency == '') {
                layer.msg('请把值填写完整');
                return false;
            }
            let report_frequency_reg = /^([5-9]|(1[0-5]))$/;
            if (!report_frequency_reg.test(report_frequency)) {
                layer.msg('请输入正确的上报频率（5-15）');
                return false;
            }

            let bind_live_reg = /^\d+$/;
            if (!bind_live_reg.test(bind_live)) {
                layer.msg('请输入正确的监听时间（整数）！');
                return false;
            }
            $.ajax({
                url: '/operatorDevice/add',
                method: 'post',
                data: {
                    master_name: master_name,
                    keep_url: keep_url,
                    bind_live: bind_live,
                    report_frequency: report_frequency
                },
                success: (result) => {
                    if (result > 0) {
                        layer.msg('新增成功！');
                        setTimeout(() => {
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg('新增失败！master名称重复！');
                    }
                }
            });
        });


        let add = document.getElementById('addBtn');
        add.addEventListener('click', function cancel() {
            if (typeof (nodeInfo) == 'undefined') {
                common.showLayer({
                    title: ['添加master', 'font-size:25px;text-align:center'],
                    width: '600px',
                    height: '500px',
                    name: '#add-master'
                });
            } else {
                common.showLayer({
                    title: ['添加ip', 'font-size:25px;text-align:center'],
                    width: '600px',
                    height: '500px',
                    name: '#add-ip-main'
                });
            }
        });

        let delete_btn = document.getElementById('deleteBtn');
        delete_btn.addEventListener('click', function cancel() {
            layer.confirm(`真的要删除该master吗？`, function (index, layero) {
                $.ajax({
                    url: '/operatorDevice/delete', method: 'post', data: {id: nodeInfo.id}, success: (result) => {
                        if (result == 1) {
                            layer.msg('删除成功！');
                            setTimeout(() => {
                                $.ajax({
                                    url: '/operatorDevice/getTree',
                                    method: 'POST',
                                    success: (result) => {
                                        var tree = $('#jstree');
                                        tree.jstree(true).settings.core.data = result;
                                        tree.jstree(true).refresh();
                                    }
                                });
                            }, 1000)
                        } else {
                            layer.msg('删除失败！');
                        }
                    }
                });
            });
        });


        let edit_masterInfo = document.getElementById('edit-masterInfo');
        edit_masterInfo.addEventListener('click', function cancel() {
            //监听修改时的数据
            let bindLive = $('#bind_live').val();
            let regBindLive = /^\d+$/;
            if (!regBindLive.test(bindLive)) {
                layer.msg('请输入正确的监听时间（整数）！');
                return false;
            }

            let reportFrequency = $('#report_frequency').val();
            let regReportFrequency = /^([5-9]|(1[0-5]))$/;
            if (!regReportFrequency.test(reportFrequency)) {
                layer.msg('请输入正确的上报频率（5-15）');
                return false;
            }
            $.ajax({
                url: '/operatorDevice/edit',
                method: 'POST',
                data: {
                    master_name: $('#master_name').val(),
                    id: $('#add-id').val(),
                    keep_live_url: $('#keep_url').val(),
                    bind_live: $('#bind_live').val(),
                    report_frequency: $('#report_frequency').val()
                },
                success: (result) => {
                    if (result == 0) {
                        layer.msg('修改失败！');
                    } else {
                        layer.msg('修改成功！');
                        setTimeout(() => {
                            layer.closeAll();
                            $.ajax({
                                url: '/operatorDevice/getTree',
                                method: 'POST',
                                success: (result) => {
                                    var tree = $('#jstree');
                                    tree.jstree(true).settings.core.data = result;
                                    tree.jstree(true).refresh();
                                }
                            });
                        }, 1000);
                    }
                }
            });
        });


        $('#jstree').on("changed.jstree", function (e, data) {
            var ref = $('#jstree').jstree(true);//获得整个树
            nodeInfo = ref.get_selected(true)[0];
            let masterId;
            if (typeof (data.node) != 'undefined') {
                masterId = data.node.id;
                table.render({
                    elem: '#demo'
                    , height: 500
                    , where: {id: masterId} //如果无需传递额外参数，可不加该参数
                    , url: '/operatorDevice/nodeInfo/' //数据接口
                    , page: true //开启分页
                    , title: '应用列表'
                    , skin: "line"
                    , even: true
                    , cols: [[ //表头
                        {field: 'id', title: 'id', hide: true}
                        , {field: 'port', title: '端口', width: 150}
                        , {field: 'ip_address', title: 'ip地址', cellMinWidth: 200}
                        , {field: 'inside_ip', title: '内部ip地址', cellMinWidth: 200}
                        , {
                            field: 'ip_type', title: '类型', templet: function (d) {
                                if (d == 0) {
                                    return '正常ip';
                                } else if (d == 1) {
                                    return '高危ip';
                                } else {
                                    return '高防';
                                }
                            }, cellMinWidth: 200
                        }
                        , {
                            field: 'status  ', title: '状态', templet: function (d) {
                                if (d == 0) {
                                    return '成功';
                                } else if (d == 1) {
                                    return '线路已存在';
                                } else if (d == 2) {
                                    return '线路已关闭';
                                } else if (d == 3) {
                                    return '线路初始化';
                                } else {
                                    return '未初始化的ip';
                                }
                            }, cellMinWidth: 200
                        }
                        , {
                            field: 'line_status', title: '线路状态', templet: function (d) {
                                if (d.line_status == 0) {
                                    return '正常';
                                } else if (d.line_status == 1) {
                                    return '维护';
                                } else if (d.line_status == 2) {
                                    return '升级';
                                } else if (d.line_status == 3) {
                                    return '故障';
                                }
                                return '未知状态';
                            }, cellMinWidth: 200
                        }
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', cellMinWidth: 200}
                    ]]
                });

            }
        });

    });
</script>
</body>
</html>
